<template>
  <div>
    <van-row>
      <van-col span="24">
        <van-search
          v-model="value"
          show-action
          label="歌名"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="22" offset="1">
        <template v-for="it in list">
          <van-tag class="tag" @click="key(it.key)" type="primary" size="medium" :key="it.id">{{ it.key }} </van-tag>
        </template>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      list: [
        { id: 1, key: "伍佰" },
        { id: 3, key: "陈奕迅" },
        { id: 2, key: "李荣浩" },
      ],
    };
  },
  methods: {
    key(key){
      this.value = key
    },
    onSearch: async function () {
      this.$router.push({ path: "/list", query: { key: this.value } });
    },
  },
};
</script>

<style  scoped>
.tag{
  margin-left: 5px;
}
</style>